<route>
  {
      meta: {
          layout: 'index',
          title:'案例库信息管理'
      }
  }  
</route>
<template>
  <div>
    <a-space style="margin-bottom: 10px;">
      <a-input v-model:value="query.searchKey" @keyup.enter.native="getList(query)" placeholder="根据关键词查询">
        <template #prefix>
          <SearchOutlined />
        </template>
      </a-input>
      <a-button type="primary" style="margin-left: 600px; margin-bottom: 5px; width: 100px;" @click="addItem">
        <template #icon><plus-outlined /></template>新增
      </a-button>
    </a-space>
    <a-table :dataSource="listData" :columns="columns" bordered :scroll="{ x: 1000 }" :pagination="false">
      <template #bodyCell="{ column, text, record }">
        <template v-if="['stuckInstruments', 'cause'].includes(column.dataIndex)">
          <div>
            {{ column.dataIndex === 'cause' ? record.cause.join(', ') : (record.stuckInstruments ?
              record.stuckInstruments.join(', ') : '') }}
          </div>
        </template>
        <template v-if="column.dataIndex === 'action'">
          <div>
            <span>
              <a-button type="link" @click="edit(record)">编辑</a-button>
              <AntdZh><a-popconfirm title="确定删除该条记录 ?" @confirm="del(record.id)">
                  <a-button type="link" danger>删除</a-button>
                </a-popconfirm></AntdZh>
            </span>
            <span v-if="record.caseFileID">
              <a-button type="link" @click="openDetail(record)">案例文件预览</a-button>
            </span>
          </div>
        </template>
      </template>
    </a-table>
    <AntdZh>
      <a-pagination v-model:current="query.pageNum" v-model:pageSize="query.pageSize" :total="total" @change="getList" />
    </AntdZh>

    <!-- 新版添加或修改部门对话框 -->
    <AntdConfirmModal :title="title ? '新增信息' : '编辑信息'" ref="modalRef" width="750px" :keepSlot="false"
      @confirm="submitForm">
      <a-form :model="form" name="basic" :label-col="{ span: 8 }">
        <a-row>
          <a-col :span="12">
            <a-form-item label="井号" name="wellId">
              <a-input v-model:value="form.wellId" style="width: 200px;" placeholder="请输入井名" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="单位" name="unit">
              <a-input v-model:value="form.unit" style="width: 200px;" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="时间" name="time">
              <!-- <a-date-picker v-model:value="form.time" format="YYYY-MM-DD" style="width: 200px" placeholder="时间" /> -->
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="作业类型" name="workType">
              <a-input v-model:value="form.workType" style="width: 200px;" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="打捞方式" name="salvageMode">
              <a-input v-model:value="form.salvageMode" style="width: 200px;" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="历时" name="duration">
              <a-input v-model:value="form.duration" style="width: 200px;" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="作业空间" name="workSpace">
              <a-select v-model:value="form.workSpace" style="width: 200px">
                <a-select-option v-for="item of workSpace" :value="item" :key="item">
                  {{ item }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="遇卡仪器" name="stuckInstruments">
              <a-select v-model:value="form.stuckInstruments" style="width: 200px" mode="multiple">
                <a-select-option v-for="item of stuckInstruments" :value="item" :key="item">
                  {{ item }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="遇卡描述" name="description">
              <a-select v-model:value="form.description" style="width: 200px">
                <a-select-option v-for="item of description" :value="item" :key="item">
                  {{ item }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="电缆张力" name="tension">
              <a-select v-model:value="form.tension" style="width: 200px">
                <a-select-option v-for="item of tension" :value="item" :key="item">
                  {{ item }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="卡点" name="points">
              <a-select v-model:value="form.points" style="width: 200px">
                <a-select-option v-for="item of points" :value="item" :key="item">
                  {{ item }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="遇卡原因" name="cause">
              <a-select v-model:value="form.cause" style="width: 200px" mode="multiple">
                <a-select-option v-for="item of cause" :value="item" :key="item">
                  {{ item }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :pull="4" :span="24">
            <a-form-item label="风险提示" name="riskWarning">
              <a-textarea v-model:value="form.riskWarning" :rows="3" />
            </a-form-item>
          </a-col>
          <a-col :pull="4" :span="24">
            <a-form-item label="备注" name="remark">
              <a-textarea v-model:value="form.remark" :rows="3" />
            </a-form-item>
          </a-col>
        </a-row>
        <!-- <a-row>
          <a-col :pull="4" :span="24">
            <a-form-item label="摘要" name="keyword">
              <a-textarea v-model:value="form.keyword" :rows="3" />
            </a-form-item>
          </a-col>
        </a-row> -->
        <a-row>
          <a-col :span="20">
            <div v-if="title == true">
              <a-form-item label="上传案例文件" style="margin-left: -120px;">
                <a-upload-dragger v-model:fileList="fileList" withCredentials name="caseFile"
                  :before-upload="beforeUpload" :maxCount="1" @remove="handleRemove">
                  <p class="ant-upload-drag-icon">
                    <inbox-outlined></inbox-outlined>
                  </p>
                  <p class="ant-upload-text">点击或者拖拽文件到此处上传</p>
                </a-upload-dragger>
              </a-form-item>
            </div>
          </a-col>
        </a-row>
      </a-form>
    </AntdConfirmModal>
    <!-- 报告预览-->
    <a-drawer width="65%" title="详细信息" v-if="open" v-model:visible="open">
      <template #extra>
        <a :href="`/dev-api/ufs/preview/${fileId}`" target="_blank" rel="noopener noreferrer"
          class="ant-btn ant-btn-primary" role="button"> 下载 </a>
      </template>
      <vue-office-docx :src="`/dev-api/ufs/download/${fileId}`" />
    </a-drawer>
  </div>
</template>
<script setup>
import docx from "@/assets/images/docx.svg";
import pptx from "@/assets/images/pptx.svg";
import pdf from "@/assets/images/pdf.svg";
import { DownloadOutlined, SearchOutlined, InboxOutlined, PlusOutlined } from "@ant-design/icons-vue";
import { queryList, createOne, deleteOne, updateOne } from "@/api/salvage/case.js";
import { workSpace, stuckInstruments, description, tension, points, cause } from '../../../constant/select'
import VueOfficeDocx from '@vue-office/docx';
import request from '@/utils/request'
import dayjs from 'dayjs'
import "dayjs/locale/zh-cn"
import useApp from "@/hooks";
const { $ } = useApp();
const listData = ref([]);
const total = ref(null)
const fileList = ref([]);
const title = ref(null);
const modalRef = ref(null);
const open = ref(false)
const fileId = ref('')
const form = ref({
  time: ''
})
const fileForm = ref({
  file: null,
});
const query = ref({
  order: "DESC",
  pageNum: 1,
  pageSize: 8,
  sortBy: "id",
  searchKey: "",
  wellId: "",
});
const columns = [
  {
    title: '井号',
    dataIndex: 'wellId',
    key: 'wellId',
    fixed: 'left',
    width: 120
  },
  {
    title: '单位',
    dataIndex: 'unit',
    key: 'unit',
    width: 100
  },
  {
    title: '时间',
    dataIndex: 'time',
    key: 'time',
    width: 100
  },
  {
    title: '作业类型',
    dataIndex: 'workType',
    key: 'workType',
    width: 100
  },
  {
    title: '打捞方式',
    dataIndex: 'salvageMode',
    key: 'salvageMode',
    width: 100
  },
  {
    title: '历时',
    dataIndex: 'duration',
    key: 'duration',
    width: 100
  },
  {
    title: '作业空间',
    dataIndex: 'workSpace',
    key: 'workSpace',
    width: 100
  },
  {
    title: '遇卡仪器',
    dataIndex: 'stuckInstruments',
    key: 'stuckInstruments',
    width: 100
  },
  {
    title: '遇卡描述',
    dataIndex: 'description',
    key: 'description',
    width: 100
  },
  {
    title: '电缆张力',
    dataIndex: 'tension',
    key: 'tension',
    width: 150
  },
  {
    title: '卡点',
    dataIndex: 'points',
    key: 'points',
    width: 100
  },
  {
    title: '遇卡原因',
    dataIndex: 'cause',
    key: 'cause',
    width: 100
  },
  {
    title: '风险提示',
    dataIndex: 'riskWarning',
    key: 'riskWarning',
    width: 400
  },
  {
    title: '备注',
    dataIndex: 'remark',
    key: 'remark',
    width: 350
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    fixed: 'right',
    width: 160
  }
];
const beforeUpload = (file) => {
  // 记录文件
  fileForm.value.file = file;
};
// 移除文件
const handleRemove = (file) => {
  fileForm.value.file = null;
};
// 预览
function openDetail(objId) {
  open.value = true;
  fileId.value = objId.caseFileID
}
// 新增
function addItem() {
  title.value = true
  form.value = {}
  modalRef.value.openModal()
}
//编辑
function edit(e) {
  title.value = false
  form.value = e
  getList();
  modalRef.value.openModal();
};
// 删除
const del = (key) => {
  deleteOne(key).then((res) => {
    $.showToast({
      title: "删除成功",
      icon: "success",
    });
    getList();
  });
};
// 获取列表
function getList() {
  queryList(query.value).then((res) => {
    listData.value = res.content;
    total.value = res.totalElements
  });
}
getList();

// 提交
function submitForm() {
  form.value.caseFile = fileForm.value.file
  if (form.value.time) {
    form.value.time = dayjs(form.value.time, 'YYYY-MM-DD')
    // form.value.time = dayjs(form.value.time).format('YYYY-MM-DD') 
  }
  console.log('form.value', form.value)
  if (title.value == true) {
    // if (form.value.caseFile == null) {
    //   $.showToast({ title: "文件不允许为空", icon: "warn" });
    // }
    request.post("/salvage/cases", form.value, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    }).then((res) => {
      // console.log('createOne', res);
      $.showToast({
        title: " 上传成功",
        icon: "success",
      });
      getList()
    });
  } else if (title.value == false) {
    updateOne(form.value).then((res) => {
      // console.log('updateOne', res);
      $.showToast({
        title: "修改成功",
        icon: "success",
      });
      getList()
    });
  }
  modalRef.value.closeModal()
}
</script>
